<template>
	<div class='cont'>
		<view class="content">

			<div class="user">
				<span class='userImg no' v-if="defaultAvatar==''||defaultAvatar==null"></span>
				<img :src="defaultAvatar" alt="" class="userImg" v-else />
				<div>
					<div class="userName">{{data.nickname}}</div>
				</div>
			</div>
		<!-- 	<div class='selectItem'>
				<div class="item" @click='toNew(1)'>
					<div class="left1"></div>
					<div class="right">
						<div class='name'>我的成绩</div>
						<div class='info'>查看成绩</div>
					</div>
				</div>
				<div class="item" @click='toNew(2)'>
					<div class="left2"></div>
					<div class="right">
						<div class='name'>我的考试</div>
						<div class='info'>考试记录</div>
					</div>
				</div>
			</div> -->
			<view class="myselect">
				<view class="item" @click='toNew(3)'>
					<view class="left"><span class='reading'></span>读书记录</view>
					<view class="right rightIcon"></view>
				</view>
				<view class="item" @click='toNew(4)'>
					<view class="left"><span class='video'></span>视频记录</view>
					<view class="right rightIcon"></view>
				</view>

			</view>
			<view class="myselect">
				<view class="logoutBtn" @click='logout()'>
					退出
				</view>
			</view>

			<div style='height: 100rpx;'></div>
		</view>
		<!-- <TabBar></TabBar> -->
	</div>
</template>

<script>
	// import TabBar from '@/components/TabBar.vue'
	export default {
		data() {
			return {
				data: {},
				defaultAvatar: '',
				// defaultAvatar: '',
			};
		},
		components: {
			// TabBar,
		},
		onLoad() {},
		onShow() {
			//console.log('my执行了onShow');
			// 生产
			// uni.setStorageSync('token', 'f239d0d31b934bfc915cd60bafda92cd');
		},
		// watch: {
		// 	searchVal(val) {
		// 		//console.log('val==', val)
		// 	},
		// },
		mounted() {
			//console.log('my执行了mounted');
			this.Initialize()
		},
		onHide() {
			//console.log('my执行了onHide');
		},
		beforeDestroy() {
			//console.log('my执行了beforeDestroy');
		},
		methods: {

			toNew(val) {
				//console.log('val==', val);
				if (val == '1') { //我的成绩
					uni.navigateTo({
						url: '/pages/my/myGrades'
					});
				} else if (val == '2') { //我的考试
					uni.navigateTo({
						url: '/pages/my/myTest'
					});
				} else if (val == '3') { //读书记录
					uni.navigateTo({
						url: '/pages/my/readingRecord'
					});
				} else if (val == '4') { //视频记录
					uni.navigateTo({
						url: '/pages/my/watchRecord'
					});
				}
			},

			Initialize() {
				//获取用户信息
				let _this = this;
				this.uniRequest({
					url: `/my/user_info`,
					method: 'post',
					success: res => {
						if (res.code == 200) {
							this.data = res.data
							this.defaultAvatar = res.data.head_portrait
						}
					},
					fail: err => {
						//console.log('request fail错误', err);
					}
				});
			},
			logout() {
				this.uniRequest({
					url: `/logout`,
					method: 'post',
					success: res => {
						// console.log('res', res);
						if (res.code == 200) {
							uni.hideToast()
							uni.reLaunch({
								url: `/pages/index/login`
							})
						}else if (res.code == 201) {
							uni.hideToast()
							uni.reLaunch({
								url: `/pages/index/login`
							})
						}
					},
					fail: err => {
						// console.log('request fail错误', err);
						
					}
				});
			},

		}
	};
</script>

<style lang="less" scoped>
	// .cont {
	// 	margin: 0;
	// 	padding: 0;
	// 	width: 100vw;
	// 	height: 100vh;
	// 	position: relative;
	// }

	.content {
		// background-color: white;
		width: 100vw;
		min-height: 100vh;
		position: absolute;
		top: 0;
		overflow: auto;
background-color: #ece8e5;

		.user {
			display: flex;
			align-items: center;
			margin: 32rpx;

			.userImg {
				// background: url(~@/static/imgs/img_user_touxiang.png) no-repeat center;
				// background-size: 100% 100%;
				width: 128rpx;
				height: 128rpx;
				display: inline-block;
				border-radius: 50%;
			}

			.userImg.no {
				background: url(~@/static/imgs/img_user_touxiang.png) no-repeat center;
				background-size: 100% 100%;
				width: 128rpx;
				height: 128rpx;
			}

			.userName {
				font-size: 48rpx;
				font-weight: bold;
				color: #323942;
				margin-left: 38rpx;
			}
		}

		.selectItem {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			margin: 32rpx;

			.item {
				padding: 32rpx;
				background-color: #fffdfc;
				border-radius: 12rpx;
				width: calc(50% - 80rpx);
				display: flex;

				.left1 {
					background: url(~@/static/imgs/icon_wode_chengj.png) no-repeat center;
					background-size: 100% 100%;
					width: 48rpx;
					height: 48rpx;
					display: inline-block;
					margin-right: 22rpx;
				}

				.left2 {
					background: url(~@/static/imgs/icon_wode_kaoshi.png) no-repeat center;
					background-size: 100% 100%;
					width: 48rpx;
					height: 48rpx;
					display: inline-block;
					margin-right: 22rpx;
				}

				.right {
					.name {
						font-size: 32rpx;
						font-weight: bold;
						color: #575C65;
						line-height: 48rpx;
					}

					.info {
						font-size: 26rpx;
						font-weight: normal;
						color: #959BA5;
						// line-height: 48rpx;
					}
				}
			}


		}

		.myselect {
			width: calc(100vw- 64rpx);
			background-color: white;
			margin: 24rpx 32rpx 0;
			padding: 10rpx 0;
			border-radius: 12rpx;
			line-height: 80rpx;

			.item {
				padding: 0 32rpx;
				height: 100rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;
				position: relative;

				.left {
					display: flex;
					align-items: center;

					.reading {
						background: url(~@/static/imgs/icon_dushu_jilu.png) no-repeat center;
						background-size: 100% 100%;
					}

					.video {
						background: url(~@/static/imgs/icon_shipin_jilu.png) no-repeat center;
						background-size: 100% 100%;
					}

					span {
						width: 34rpx;
						height: 40rpx;
						display: inline-block;
						margin-right: 28rpx;
					}

					font-size: 32rpx;
					font-weight: bold;
					color: #181E27;
				}

				.rightIcon {
					padding-right: 16rpx;
					font-size: 24rpx;
					color: #999999;
				}

				.rightIcon::after {
					content: '';
					background: url(~@/static/imgs/icon_arrow.png) no-repeat center;
					background-size: 100% 100%;
					position: absolute;
					height: 30rpx;
					width: 18rpx;
					top: 0rpx;
					bottom: 0;
					right: 32rpx;
					margin: auto;
				}
			}

			.logoutBtn {
				font-weight: bold;
				text-align: center;
				font-size: 32rpx;
			}

			.item:not(:first-child) {
				border-top: 1rpx solid #f8f8fa;
			}
		}

	}
</style>
